跳到主要内容

占位 Spacer

有时候你想在两个控件之间留点空，或者把某个控件推到对面去。Spacer 就是一块"空气"——它占据布局空间，但什么都不画。

一句话理解

Spacer = 透明的弹簧。你可以用它推开其他控件，或者单纯制造留白。

函数原型​

void Spacer(HXPoint Size = {0, 5});

参数说明​

参数类型默认值说明
SizeHXPoint{0, 5}占位的宽高。
为什么默认是 {0, 5}？

因为在 HiEasyX 的默认垂直布局中，水平宽度通常不需要手动占（会自动撑满），而垂直方向加个 5px 的小间隙是最常见的需求。所以默认值贴心地设成了 {0, 5}。

在垂直布局中的行为​

垂直布局下，Spacer 的高度起作用，宽度被忽略：

HX::Text(HXStr("上面的文字"));
HX::Spacer({0, 20});   // 空出 20 像素的垂直距离
HX::Text(HXStr("下面的文字"));

这在想让两块内容"离远点"时非常有用，比调 ControlGap 更灵活——ControlGap 影响的是所有控件，而 Spacer 只影响这一次。

在水平布局中的行为​

水平布局下（BeginHorizontal 内部），Spacer 的宽度起作用，高度被忽略：

HX::BeginHorizontal();
HX::Button(HXStr("左侧"), bp);
HX::Spacer({50, 0});   // 空出 50 像素的水平距离
HX::Button(HXStr("右侧"), bp);
HX::EndHorizontal();
经典的 "推到右边" 技巧

在 BeginHorizontal() 里放一个 Spacer({0, 0})，它会把后面的控件推到最右侧：

HX::BeginHorizontal();
HX::Button(HXStr("保存"), bp);
HX::Button(HXStr("取消"), bp);
HX::Spacer({0, 0});       // 弹性占位：把后面的按钮推到右边
HX::Button(HXStr("高级设置"), bp);
HX::EndHorizontal();

原理是：Spacer({0,0}) 在水平布局里宽度为 0，但布局系统会把它当作可拉伸的弹性空间，自动分配所有剩余宽度。类似 CSS 的 flex: 1。

配合 NextItemXxx 使用​

你也可以用 Spacer 做精确的像素级留白：

HX::Button(HXStr("按钮1"), bp);
HX::Spacer({0, 30});  // 精确空出 30px
HX::Button(HXStr("按钮2"), bp);

这比改全局 ControlGap 更安全——不会影响其他控件。

完整示例代码​

#include <include/hex.h>
#include <include/impl/EasyX/hex_impl_easyx.h>

int main() {
    initgraph(800, 600);
    setbkcolor(WHITE);
    cleardevice();

    HX::HXInitForEasyX();
    HX::SetBuffer(GetWorkingImage());

    BeginBatchDraw();

    static HX::WindowProfile wp;
    wp.Size = {450, 450};

    static HX::ButtonProfile bp;
    static float val = 0.5f;
    static HX::SliderProfile1f sp;

    while (true) {
        HX::HXBegin();

        ExMessage msg;
        while (peekmessage(&msg)) {
            HX::PushMessage(HX::GetHXMessage(&msg));
        }

        HX::Window(HXStr("Spacer 演示"), wp);

        // ---------- 垂直留白 ----------
        HX::Text(HXStr("第一部分"));
        HX::Button(HXStr("按钮 A"), bp);

        HX::Spacer({0, 30});  // 空出 30 像素

        HX::Text(HXStr("第二部分（离上面很远）"));
        HX::Button(HXStr("按钮 B"), bp);

        HX::Separator();

        // ---------- 水平布局中的 Spacer ----------
        HX::BeginHorizontal();
        HX::Button(HXStr("左对齐"), bp);
        HX::Spacer({0, 0});   // 弹性占位，把后面的按钮推到右边
        HX::Button(HXStr("右对齐"), bp);
        HX::EndHorizontal();

        // ---------- 固定间距的水平布局 ----------
        HX::BeginHorizontal();
        HX::Button(HXStr("A"), bp);
        HX::Spacer({20, 0});  // 固定 20px 间距
        HX::Button(HXStr("B"), bp);
        HX::Spacer({20, 0});
        HX::Button(HXStr("C"), bp);
        HX::EndHorizontal();

        HX::End();
        HX::Render();
        FlushBatchDraw();
        Sleep(16);
    }

    closegraph();
    return 0;
}
小建议

Spacer 是调节布局呼吸感的神器。界面太挤就加点 Spacer，太散就减点。记住：

  • 垂直布局里它管高度
  • 水平布局里它管宽度
  • {0, 0} 在水平布局里是个"弹簧"，会把后面的东西推到对面去